<mat-drawer-container hasBackdrop="false" class="cne-absolute-fill">
  @if (tableConfig.detailsPanelEnabled) {
    <mat-drawer class="cne-details-drawer mat-elevation-z4"
                #drawer
                mode="over"
                position="end"
                [opened]="isDetailsOpen">
      <!-- TODO: 详情面板组件需要实现 -->
      <!-- <cne-entity-details-panel
        #entityDetailsPanel
        [entitiesTableConfig]="entitiesTableConfig"
        [entityId]="isDetailsOpen ? dataSource.currentEntity?.id : null"
        (closeEntityDetails)="isDetailsOpen = false; detailsPanelOpened.emit(isDetailsOpen);"
        (entityUpdated)="onEntityUpdated($event)"
        (entityAction)="onEntityAction($event)"
      >
    </cne-entity-details-panel> -->
    </mat-drawer>
  }
  <mat-drawer-content>
    <div class="mat-padding cne-entity-table cne-absolute-fill">
      <div class="cne-entity-table-content cne-outlined-border flex flex-col">
        <!-- 主工具栏：标题、搜索、添加、操作按钮 -->
        @if (!textSearchMode && dataSource.selection.isEmpty()) {
          <mat-toolbar class="mat-mdc-table-toolbar">
          <div class="mat-toolbar-tools">
            <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
              @if (tableConfig.tableTitle) {
                <span class="cne-entity-table-title">{{ tableConfig.tableTitle }}</span>
              }
              <cne-anchor #tableHeader></cne-anchor>
              <!-- TODO: 时间窗口组件 cne-timewindow 需要实现 -->
              <!-- <cne-timewindow *ngIf="tableConfig.useTimePageLink" [(ngModel)]="timewindow"
                              (ngModelChange)="onTimewindowChange()"
                              asButton strokedButton historyOnly [forAllTimeEnabled]="tableConfig.forAllTimeEnabled"></cne-timewindow> -->
            </div>
            <span class="flex-1"></span>
            <!-- 添加按钮 -->
            @if (addEnabled()) {
              <div>
                @if (!tableConfig.addActionDescriptors.length) {
                  @if (!tableConfig.addAsTextButton) {
                    <button mat-icon-button
                            [disabled]="isLoading$ | async"
                            (click)="addItem($event)"
                            matTooltip="添加"
                            matTooltipPosition="above">
                      <mat-icon>add</mat-icon>
                    </button>
                  } @else {
                    <button mat-stroked-button color="primary"
                            [disabled]="isLoading$ | async"
                            (click)="addItem($event)">
                      <mat-icon>add</mat-icon>
                      添加
                    </button>
                  }
                } @else {
                  @if (tableConfig.addActionDescriptors.length === 1) {
                    @if (!tableConfig.addAsTextButton && tableConfig.addActionDescriptors[0].isEnabled()) {
                      <button mat-icon-button
                              [disabled]="isLoading$ | async"
                              (click)="tableConfig.addActionDescriptors[0].onAction($event)"
                              matTooltip="{{ tableConfig.addActionDescriptors[0].name }}"
                              matTooltipPosition="above">
                        <mat-icon>{{tableConfig.addActionDescriptors[0].icon}}</mat-icon>
                      </button>
                    } @else if (tableConfig.addAsTextButton && tableConfig.addActionDescriptors[0].isEnabled()) {
                      <button mat-stroked-button color="primary"
                              [disabled]="isLoading$ | async"
                              (click)="tableConfig.addActionDescriptors[0].onAction($event)">
                        <mat-icon>{{tableConfig.addActionDescriptors[0].icon}}</mat-icon>
                        {{ tableConfig.addActionDescriptors[0].name }}
                      </button>
                    }
                  } @else {
                    <button mat-icon-button [disabled]="isLoading$ | async"
                            matTooltip="添加"
                            matTooltipPosition="above"
                            [matMenuTriggerFor]="addActionsMenu">
                      <mat-icon>add</mat-icon>
                    </button>
                    <mat-menu #addActionsMenu="matMenu" xPosition="before">
                      @for (actionDescriptor of tableConfig.addActionDescriptors; track actionDescriptor.name) {
                        <button mat-menu-item
                                [disabled]="isLoading$ | async"
                                [class.!hidden]="!actionDescriptor.isEnabled()"
                                (click)="actionDescriptor.onAction($event)">
                          <mat-icon matMenuItemIcon>{{actionDescriptor.icon}}</mat-icon>
                          <span>{{ actionDescriptor.name }}</span>
                        </button>
                      }
                    </mat-menu>
                  }
                }
              </div>
            }
            <!-- 表头操作按钮 -->
            @for (actionDescriptor of headerActionDescriptors; track actionDescriptor.name) {
              <button mat-icon-button [disabled]="isLoading$ | async"
                      [class.!hidden]="!actionDescriptor.isEnabled()"
                      matTooltip="{{ actionDescriptor.name }}"
                      matTooltipPosition="above"
                      (click)="actionDescriptor.onAction($event)">
                <mat-icon>{{actionDescriptor.icon}}</mat-icon>
              </button>
            }
            <!-- 刷新按钮 -->
            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                    matTooltip="刷新"
                    matTooltipPosition="above">
              <mat-icon>refresh</mat-icon>
            </button>
            <!-- 搜索按钮 -->
            @if (tableConfig.searchEnabled) {
              <button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                      matTooltip="搜索"
                      matTooltipPosition="above">
                <mat-icon>search</mat-icon>
              </button>
            }
          </div>
        </mat-toolbar>
        }
        
        <!-- 搜索工具栏 -->
        @if (textSearchMode && dataSource.selection.isEmpty()) {
          <mat-toolbar class="mat-mdc-table-toolbar">
          <div class="mat-toolbar-tools">
            <button mat-icon-button
                    matTooltip="搜索"
                    matTooltipPosition="above">
              <mat-icon>search</mat-icon>
            </button>
            <mat-form-field class="flex-1">
              <mat-label>&nbsp;</mat-label>
              <input #searchInput matInput
                     [formControl]="textSearch"
                     placeholder="输入搜索关键词"/>
            </mat-form-field>
            <button mat-icon-button (click)="exitFilterMode()"
                    matTooltip="关闭"
                    matTooltipPosition="above">
              <mat-icon>close</mat-icon>
            </button>
          </div>
        </mat-toolbar>
        }
        
        <!-- 选择工具栏 -->
        @if (tableConfig.selectionEnabled && !dataSource.selection.isEmpty()) {
          <mat-toolbar class="mat-mdc-table-toolbar" color="primary">
            <div class="mat-toolbar-tools">
              <span class="cne-entity-table-info">
                已选择 {{ dataSource.selection.selected.length }} 项
              </span>
            <span class="flex-1"></span>
            @for (actionDescriptor of groupActionDescriptors; track actionDescriptor.name) {
              <button mat-icon-button [disabled]="isLoading$ | async"
                      [class.!hidden]="!actionDescriptor.isEnabled"
                      matTooltip="{{ actionDescriptor.name }}"
                      matTooltipPosition="above"
                      (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
                <mat-icon>{{actionDescriptor.icon}}</mat-icon>
              </button>
            }
            </div>
          </mat-toolbar>
        }
        
        <!-- 表格容器 -->
        <div class="table-container flex-1">
          <table mat-table [dataSource]="dataSource" [trackBy]="trackByItemId" matSort 
                  [matSortActive]="pageLink.sortOrder?.property || ''" 
                  [matSortDirection]="pageLink.sortDirection()" 
                  matSortDisableClear>
            <!-- 选择列 -->
            @if (selectionEnabled) {
              <ng-container matColumnDef="select" sticky>
                <mat-header-cell *matHeaderCellDef style="width: 40px;">
                  <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
                                [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
                                [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
                  </mat-checkbox>
                </mat-header-cell>
                <mat-cell *matCellDef="let item">
                  <mat-checkbox (click)="$event.stopPropagation()"
                                [class.!hidden]="!tableConfig.itemSelectionEnabled(item)"
                                (change)="$event ? dataSource.selection.toggle(item) : null"
                                [checked]="dataSource.selection.isSelected(item)">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>
            }
            
            <!-- 数据列 -->
            @for (column of dataColumns; track trackByColumnKey($index, column)) {
              <ng-container [matColumnDef]="column.key">
                <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
                                  [class.lt-lg:!hidden]="column.mobileHide"
                                  *matHeaderCellDef 
                                  [style]="headerCellStyle(column)"
                                  mat-sort-header 
                                  [disabled]="!column.sortable">
                  {{ column.ignoreTranslate ? column.title : (column.title | translate) }}
                </mat-header-cell>
                <mat-cell [class.mat-number-cell]="column.isNumberColumn"
                          [class.cell-action]="column.actionCell?.type === cellActionType.COPY_BUTTON"
                          [class.lt-lg:!hidden]="column.mobileHide"
                          *matCellDef="let item; let row = index"
                          [matTooltip]="cellTooltip(item, column, row)"
                          #cellMatTooltip="matTooltip"
                          matTooltipPosition="above"
                          [style]="cellStyle(item, column, row)">
                  @switch (column.type) {
                    @case ('link') {
                      @if (column.itemURL(item); as detailsPageURL) {
                        <a [routerLink]="detailsPageURL" 
                            [innerHTML]="cellContent(item, column, row)"
                            (click)="$event.stopPropagation();"></a>
                      } @else {
                        <span [innerHTML]="cellContent(item, column, row)"></span>
                      }
                    }
                    @case ('chips') {
                      <!-- TODO: Chips 组件需要实现 -->
                      <!-- <cne-entity-chips [entity]="entity" [key]="column.key"
                      [detailsPagePrefixUrl]="column.entityURL ? column.entityURL(entity) : ''"></cne-entity-chips> -->
                      <span [innerHTML]="cellContent(item, column, row)"></span>
                    }
                    @default {
                      <span [innerHTML]="cellContent(item, column, row)"></span>
                    }
                  }
                  <!-- 单元格操作按钮 -->
                  @if (column.actionCell && column.actionCell.isEnabled(item)) {
                    @switch (column.actionCell.type) {
                      @case (cellActionType.COPY_BUTTON) {
                        <!-- TODO: COPY_BUTTON 组件需要实现 -->
                        <!-- <cne-copy-button
                          class="copy-button"
                          [disabled]="isLoading$ | async"
                          [class.!hidden]="!column.actionCell.isEnabled(item)"
                          [copyText]="column.actionCell.onAction(null, item)"
                          tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(item) : column.actionCell.name }}"
                          tooltipPosition="above"
                          (mouseover)="cellMatTooltip.hide()"
                          (mouseleave)="cellMatTooltip.show()"
                          [icon]="column.actionCell.icon"
                          [style]="column.actionCell.style">
                        </cne-copy-button> -->
                      }
                      @default {
                        <button mat-icon-button [disabled]="isLoading$ | async"
                                matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(item) : column.actionCell.name }}"
                                matTooltipPosition="above"
                                (click)="column.actionCell.onAction($event, item)">
                          <mat-icon [style]="column.actionCell.style">
                            {{column.actionCell.icon}}
                          </mat-icon>
                        </button>
                      }
                    }
                  }
                </mat-cell>
              </ng-container>
            }
          
            <!-- 操作列 -->
            @for (column of actionColumns; track column.key) {
              <ng-container [matColumnDef]="column.key">
                <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
                <mat-cell *matCellDef="let item; let row = index"
                          [style]="cellStyle(item, column, row)">
                  <button mat-icon-button [disabled]="isLoading$ | async"
                          [class.!hidden]="!column.actionDescriptor.isEnabled(item)"
                          matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(item) : column.actionDescriptor.name }}"
                          matTooltipPosition="above"
                          (click)="column.actionDescriptor.onAction($event, item)">
                    <mat-icon [style]="column.actionDescriptor.style">
                      {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(item) : column.actionDescriptor.icon}}
                    </mat-icon>
                  </button>
                </mat-cell>
              </ng-container>
            }
          
          <!-- 操作列（固定右侧） -->
          @if (cellActionDescriptors.length) {
            <ng-container matColumnDef="actions" stickyEnd>
              <mat-header-cell *matHeaderCellDef>
                <div class="gt-md:!hidden" style="min-width: 48px;">
                  {{ tableConfig.actionsColumnTitle ? (tableConfig.actionsColumnTitle | translate) : '' }}
                </div>
                <div class="lt-lg:!hidden"
                      [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
                  {{ tableConfig.actionsColumnTitle ? (tableConfig.actionsColumnTitle | translate) : '' }}
                </div>
              </mat-header-cell>
              <mat-cell *matCellDef="let item">
                @if (cellActionDescriptors.length !== 1) {
                  <div class="flex flex-row items-stretch justify-end lt-lg:!hidden"
                        [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
                    @for (actionDescriptor of cellActionDescriptors; track actionDescriptor.name) {
                      <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(item)"
                              [class.!hidden]="!actionDescriptor.isEnabled(item)"
                              matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(item) : actionDescriptor.name }}"
                              matTooltipPosition="above"
                              (click)="actionDescriptor.onAction($event, item)">
                        <mat-icon [style]="actionDescriptor.style">
                          {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(item) : actionDescriptor.icon}}
                        </mat-icon>
                      </button>
                    }
                  </div>
                }
                @if (cellActionDescriptors.length === 1) {
                  <div class="">
                    <button mat-icon-button
                            (click)="$event.stopPropagation()"
                            [matMenuTriggerFor]="cellActionsMenu">
                      <mat-icon class="material-icons">more_vert</mat-icon>
                    </button>
                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
                      @for (actionDescriptor of cellActionDescriptors; track actionDescriptor.name) {
                        <button mat-menu-item
                                [disabled]="isLoading$ | async"
                                [class.!hidden]="!actionDescriptor.isEnabled(item)"
                                (click)="actionDescriptor.onAction($event, item)">
                          <mat-icon matMenuItemIcon [style]="actionDescriptor.style">
                            {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(item) : actionDescriptor.icon}}
                          </mat-icon>
                          <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(item) : actionDescriptor.name }}</span>
                        </button>
                      }
                    </mat-menu>
                  </div>
                }
              </mat-cell>
            </ng-container>
          }
          
            <!-- 表头和表行 -->
            <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
            <mat-row [class.!hidden]="dataSource.dataLoading"
                     [class.mat-row-select]="selectionEnabled"
                     [class.mat-selected]="dataSource.selection.isSelected(item)"
                     [class.cne-current-entity]="dataSource.isCurrentItem(item)"
                     [class.cne-pointer]="tableConfig.rowPointer"
                     *matRowDef="let item; columns: displayedColumns;" 
                     (click)="onRowClick($event, item)"></mat-row>
          </table>
          
          <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
                class="no-data-found flex items-center justify-center">暂无数据</span>
          <span [class.!hidden]="!dataSource.dataLoading"
                class="no-data-found flex items-center justify-center">加载中...</span>
        </div>
        
        <!-- 分页器 -->
        @if (displayPagination) {
          <mat-divider></mat-divider>
          <mat-paginator [length]="(dataSource.total() | async) || 0"
                          [pageIndex]="pageLink.page"
                          [pageSize]="pageLink.pageSize"
                          [pageSizeOptions]="pageSizeOptions"
                          [hidePageSize]="hidePageSize"
                          showFirstLastButtons></mat-paginator>
        }
      </div>
    </div>
  </mat-drawer-content>
</mat-drawer-container>
